/*
把内联回调函数及依赖项数组作为参数传入 useCallback
,它将返回该回调函数的 memoized 版本
,该回调函数仅在某个依赖项改变时才会更新

,并且同一个函数组件中多个useCallback之间是独立的
,也就是说一个callback重新生成 并不会导致 另外一个callback重新生成
,只要它们各自依赖的状态没有改变就成
* */
import React, {useCallback, useState} from 'react';
let lastAddClick: any;
let lastChangeName: any;
export default function Counter(){
  const [number, setNumber] = useState(0);
  const [name, setName] = useState('ahhh');

  //1)
  //每次渲染的时候都会生成一个新的↓
  // const addClick = () => setNumber(number + 1);


  //2)
  //[] 代表谁都不依赖 也就是什么情况下该函数都不会重新生成 只会创建一次
  /** 并且你还会发现无论你点多少下,只会加一下
   * ,因为addClick的number自第一次渲染后就永远不会变
   * ,这样setNumber的value就永远没变,react也就不会重新渲染*/
  // const addClick = useCallback(() => setNumber(number + 1),[]);
  // console.log('lastAddClick === addClick:',lastAddClick === addClick);
  // lastAddClick = addClick;

  /** 故一般推荐使用函数式更新state*/
  const addClick = useCallback(() => setNumber(x=>x+1), []);
  console.log('lastAddClick === addClick:',lastAddClick === addClick);
  lastAddClick = addClick;

  /** 如果是下面这样使用,点快的话,1秒内你点了几次,那么就只会加1次(这是我们之前说过的它保留了number，在1秒内这属于正常现象)(点得很快的话 只话+2次, 再点就卡主了, 这就是react的bug了 React.verson: 16.12.0)*/
  /*const addClick = useCallback(() => setNumber(number+1), [Math.floor(new Date().getTime()/1000)]);*/


  //3)
  //只有在依赖的变量发生变化的时候才会重新生成
  //故下面↓例子每次都会重新生成
  // @ts-ignore
  const changeName = useCallback(() => setName(Date.now()),[name/*←只要name状态发生改变,该函数就会重新生成*/]);
  console.log('lastChangeName === changeName:',lastChangeName === changeName);
  lastChangeName = changeName;

  return (
    <div>
      <p>{name}:{number}</p>
      <button onClick={addClick}>addClick</button>
      <button onClick={changeName}>changeName</button>
    </div>
  )
}
